import React ,{ Component ,Fragment } from 'react'
import Item from './Item'
import './style.css'

class Dajiejie extends Component {
	constructor(props){
		super(props)
		this.state = {
			inputValue:'',
			list:['泰式按摩','精油推背']
		}
	}
	componentWillMount(){
		console.log('componentWillMount------------组件将要挂载到页面的时刻')
	}
	
	componentDidMount(){
		console.log('componentDidMount-------------组件挂载完成的时刻')
	}
	
	render(){
		console.log('render----------组件挂载中')
		return (
			//flex Fragment标签
			<Fragment>
				{/* 第一次写注释 */}  
				<div>
					<label htmlFor="jsjin">激活</label>
					<input 
					id="jsjin" 
					className="border_class"  
					value={this.state.inputValue}   
					onChange={this.inputChange.bind(this)}
					ref = {(input) => {this.input = input}}
					/>
					<button  onClick={this.addlist.bind(this,'(圣和汇)')}>增加服务</button>
				</div>
				<ul ref = { (ul) => this.ul = ul}>
					{
						this.state.list.map((item,index) => {
							return (
								<Item  
								content = {item}  
								key={index+item}         
								index={index}
								dellist = {this.dellist.bind(this)}
								/>
							)
						})
					}
				</ul>
			</Fragment>
		)
	}
	inputChange(e){
		this.setState({
			// inputValue:e.target.value
			inputValue:this.input.value
		})
	}
	addlist(name){
		if(this.state.inputValue !== ''){   
			this.setState({      //虚拟dom渲染有时间
				list:[...this.state.list,this.state.inputValue+name],
				inputValue:''
			},()=>{
				console.log(this.ul.querySelectorAll('li').length)
			})
		}
		
	}
	dellist(index){  
		let newlist = this.state.list  //不能直接操作this.state   会消耗性能
		newlist.splice(index,1)
		this.setState({
			list:newlist
		})
	}
}

export default Dajiejie


/*
	<li key={index+item}>
		<span dangerouslySetInnerHTML={{__html:item}}></span> 
		<button onClick={() => this.dellist(index)}>删除</button>
	</li>
*/